﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - BoxPlot Sparkline</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });
            initSpread(spread);
        });

        function initSpread(spread) {
            spread.newTabVisible(false);
            this.initHorizontalSparkline(spread.sheets[0], "Horizontal");
            this.initVerticalSparkline(spread.sheets[1], "Vertical");
        };

        function initHorizontalSparkline(sheet, name) {
            sheet.isPaintSuspended(true);
            sheet.setName(name);
            sheet.allowCellOverflow(true);
            sheet.setColumnWidth(0, 25);
            for (var c = 2; c < 14; c++) {
                sheet.setColumnWidth(c, 38);
            }
            sheet.setColumnWidth(14, 170);
            sheet.setRowHeight(1, 40);
            sheet.setRowHeight(2, 50);
            for (var r = 3; r < 12; r++) {
                sheet.setRowHeight(r, 30);
            }
            
            sheet.getCell(1, 1).value("The Company Sales in 2014 (Month)").font("20px Arial").hAlign(spreadNS.HorizontalAlign.left);

            var table1 = sheet.addTable("htable1", 2, 1, 10, 14, spreadNS.TableStyles.medium2());
            table1.rowFilter().setShowFilterButton(false);

            for (var i = 2; i < 14; i++) {
                sheet.setValue(2, i, new Date(2014, i - 2, 1));
            }
            sheet.setFormatter(2, 2, "mm");
            sheet.setFormatter(2, 3, "mm");
            sheet.setFormatter(2, 4, "mm");
            sheet.setFormatter(2, 5, "mm");
            sheet.setFormatter(2, 6, "mm");
            sheet.setFormatter(2, 7, "mm");
            sheet.setFormatter(2, 8, "mm");
            sheet.setFormatter(2, 9, "mm");
            sheet.setFormatter(2, 10, "mm");
            sheet.setFormatter(2, 11, "mm");
            sheet.setFormatter(2, 12, "mm");
            sheet.setFormatter(2, 13, "mm");
            sheet.setValue(2, 14, "Actual Sales (mn)");
            sheet.setValue(2, 15, " ");
            sheet.getCells(2, 2, 2, 15).hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center).wordWrap(true);

            sheet.setValue(2, 1, "Region");
            sheet.setValue(3, 1, "Alabama");
            sheet.setValue(4, 1, "Alaska");
            sheet.setValue(5, 1, "Arizona");
            sheet.setValue(6, 1, "Idaho");
            sheet.setValue(7, 1, "Indiana");
            sheet.setValue(8, 1, "Ohio");
            sheet.setValue(9, 1, "Oklahoma");
            sheet.setValue(10, 1, "Oregon");
            sheet.setValue(11, 1, "Vermont");
            sheet.setValue(12, 1, "Start scope of the sale:");
            sheet.setValue(13, 1, "End scope of the sale:");
            sheet.setValue(14, 1, "Start scope of expected sale:");
            sheet.setValue(15, 1, "End scope of expected sale:");
            sheet.addSpan(12, 1, 1, 4);
            sheet.addSpan(13, 1, 1, 4);
            sheet.addSpan(14, 1, 1, 4);
            sheet.addSpan(15, 1, 1, 4);
            sheet.setValue(12, 5, 0);
            sheet.setValue(13, 5, 10000);
            sheet.setValue(14, 5, 1000);
            sheet.setValue(15, 5, 8000);

            sheet.setFormula(3, 14, '=BOXPLOTSPARKLINE(C4:O4,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(4, 14, '=BOXPLOTSPARKLINE(C5:O5,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(5, 14, '=BOXPLOTSPARKLINE(C6:O6,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(6, 14, '=BOXPLOTSPARKLINE(C7:O7,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(7, 14, '=BOXPLOTSPARKLINE(C8:O8,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(8, 14, '=BOXPLOTSPARKLINE(C9:O9,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(9, 14, '=BOXPLOTSPARKLINE(C10:O10,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(10, 14, '=BOXPLOTSPARKLINE(C11:O11,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');
            sheet.setFormula(11, 14, '=BOXPLOTSPARKLINE(C12:O12,"5ns",true,F13,F14,F15,F16,"#00FF7F",0,false)');

            var data = [[5268, 6281, 8921, 1069, 1239, 2818, 6327, 5173, 5780, 3595, 4346, 3719],
                        [2837, 5739, 993, 4247, 9514, 5986, 44, 2682, 8951, 691, 4945, 7513],
                        [6661, 4172, 9777, 1282, 9535, 2540, 2972, 4400, 6604, 3459, 5959, 3785],
                        [1696, 5521, 4525, 8269, 7239, 5311, 762, 928, 8602, 5852, 4344, 6708],
                        [9726, 4286, 874, 5885, 6740, 1732, 3358, 1675, 2539, 9958, 97, 1639],
                        [3937, 6168, 3720, 3215, 6365, 8781, 3985, 2538, 9879, 9315, 5691, 2342],
                        [3096, 4173, 3631, 633, 9395, 266, 1948, 2988, 2524, 7800, 9837, 5253],
                        [5128, 7681, 6078, 6648, 1991, 5156, 880, 2354, 7328, 2565, 9202, 6875],
                        [6853, 205, 3104, 3430, 7275, 824, 5031, 3727, 7621, 2372, 225, 7547]];
            sheet.setArray(3, 2, data);
            sheet.isPaintSuspended(false);
        }

        function initVerticalSparkline(sheet, name) {
            sheet.isPaintSuspended(true);
            sheet.setName(name);

            sheet.addSpan(0, 0, 1, 4);
            sheet.getCell(0, 0).value("Math Scores").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
            var table1 = sheet.addTable("vtable1", 1, 0, 21, 4, spreadNS.TableStyles.light12());
            table1.rowFilter().setShowFilterButton(false);
            sheet.setValue(1, 0, "Student ID");
            sheet.setValue(1, 1, "Class One");
            sheet.setValue(1, 2, "Class Two");
            sheet.setValue(1, 3, "Class Three");
            sheet.setValue(1, 4, "Class One");
            sheet.setValue(1, 5, "Class Two");
            sheet.setValue(1, 6, "Class Three");
            var score = [
                    { id: 1, classOne: 65, classTwo: 60, classThree: 98 },
                    { id: 2, classOne: 91, classTwo: 70, classThree: 99 },
                    { id: 3, classOne: 70, classTwo: 86, classThree: 92 },
                    { id: 4, classOne: 62, classTwo: 62, classThree: 78 },
                    { id: 5, classOne: 98, classTwo: 79, classThree: 71 },
                    { id: 6, classOne: 89, classTwo: 99, classThree: 68 },
                    { id: 7, classOne: 85, classTwo: 100, classThree: 88 },
                    { id: 8, classOne: 65, classTwo: 78, classThree: 74 },
                    { id: 9, classOne: 65, classTwo: 66, classThree: 85 },
                    { id: 10, classOne: 65, classTwo: 84, classThree: 80 },
                    { id: 11, classOne: 65, classTwo: 98, classThree: 79 },
                    { id: 12, classOne: 65, classTwo: 87, classThree: 50 },
                    { id: 13, classOne: 51, classTwo: 68, classThree: 64 },
                    { id: 14, classOne: 65, classTwo: 78, classThree: 73 },
                    { id: 15, classOne: 67, classTwo: 81, classThree: 88 },
                    { id: 16, classOne: 87, classTwo: 83, classThree: 85 },
                    { id: 17, classOne: 72, classTwo: 84, classThree: 84 },
                    { id: 18, classOne: 74, classTwo: 82, classThree: 86 },
                    { id: 19, classOne: 85, classTwo: 55, classThree: 92 },
                    { id: 20, classOne: 65, classTwo: 60, classThree: 69 }
            ];
            for (var i = 0, len = score.length; i < len; i++) {
                var student = score[i];
                sheet.setValue(i + 2, 0, student.id);
                sheet.setValue(i + 2, 1, student.classOne);
                sheet.setValue(i + 2, 2, student.classTwo);
                sheet.setValue(i + 2, 3, student.classThree);
            }
            sheet.setColumnWidth(0, 80);
            sheet.setColumnWidth(1, 80);
            sheet.setColumnWidth(2, 80);
            sheet.setColumnWidth(3, 80);
            sheet.setColumnWidth(4, 75);
            sheet.setColumnWidth(5, 75);
            sheet.setColumnWidth(6, 75);
            sheet.addSpan(2, 4, 20, 1);
            sheet.addSpan(2, 5, 20, 1);
            sheet.addSpan(2, 6, 20, 1);

            sheet.setFormula(2, 4, '=BOXPLOTSPARKLINE(B3:B22,"5ns",true,0,100,60,100,,0, true)');
            sheet.setFormula(2, 5, '=BOXPLOTSPARKLINE(C3:C22,"5ns",true,0,100,60,100,,0, true)');
            sheet.setFormula(2, 6, '=BOXPLOTSPARKLINE(D3:D22,"5ns",true,0,100,60,100,,0, true)');

            sheet.isPaintSuspended(false);
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 560px; border: 1px solid gray;"></div>
    </div>
</body>
</html>
